<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Resource/layui/css/layui.css" media="all">
    <script src="Resource/jquery-3.3.1.js"></script>
    <script src="Resource/layui/layui.js" charset="utf-8"></script>
    <script type="javascript">
        $('.layui-none', $(this.elem).next()).width($('.layui-table-header table', $(this.elem).next()).width() + 'px');
    </script>
    <style>
        #tab tr td{
            padding-top:10px;
            padding-left: 10px;
        }
        #xgdiv .layui-input{
            width: 200px;
            height: 30px;
        }
        #tab{
            margin-top: 5px;
            margin-left: -470px;
        }

        #image {
            position: absolute;
            top: 0px;
            left: 330px;
            background: url(image/icon1.png);
            width: 480px;
            height: 520px;
        }
        #foot{
            height: 50px;
            align-content: center;
            background: white;
        }
        #foot input{
            margin-left: 300px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <div style="display:none;background-repeat:no-repeat;" id="xgdiv">
        <form action="./updateFundCompany" method="post">
            <div id="image" style="background-repeat:no-repeat;text-align: center;">
            </div>
            <div id="image2" style="background-repeat:no-repeat;text-align: center;">
            </div>
            <center>
                <table style="width: 870px;
               width: 330px;
                height: 510px;
                overflow-x: scroll;
                overflow-y: hidden;
                background-color: white;" class="layui-form" id="tab">
                    <tr>
                        <td>基金公司编号：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="fcId" id="edit_fcId" readonly="readonly" type="text"
                                       required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>基金名称：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="fcName" id="edit_fcName" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>基金数量：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="fcfCount" id="edit_fcfCount" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>基金经理数量：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input  class="layui-input" name="fcfmCount" id="edit_fcfmCount" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>近一年收益：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="aYearIncome" id="edit_aYearIncome" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>基金规模：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input  class="layui-input" name="fScale" id="edit_fScale" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>基金成立时间：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input  class="layui-input" name="fStartTime" id="edit_fStartTime" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>明星经理：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input  class="layui-input" name="starFm" id="edit_starFm" type="text" required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>明星基金：</td>
                        <td>
                            <div class="layui-input-inline">
                                <input  class="layui-input" name="starF" id="edit_starF" type="text" required>
                            </div>
                        </td>
                    </tr>
                </table>
            </center>
            <div id="foot">
                <input style="width: 250px;background: #364150" class="layui-btn" type="submit" value="修改" />
            </div>
        </form>
    </div>
    <script type="text/html" id="toolbarDemo">
        <!-- 表单元素 -->
        <table style="margin-top: 40px;">
            <tr>
                <td>
                    <div class="layui-form-item" style="width: 280px;">
                        <label style="width: 130px;" class="layui-form-label">基金公司编号</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 150px;" name="fcId" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input cwid">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item" style="width: 280px;">
                        <label style="width: 130px;" class="layui-form-label">基金公司名称</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 150px;" name="fcName" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input zrxm">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item" style="width: 290px;">
                        <label style="width: 130px;" class="layui-form-label">公司成立时间</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 150px;" name="fStartTime" id="test1" required lay-verify="required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input ylxm">
                        </div>
                    </div>
                </td>
                <td>
                    <div class="layui-form-item">
                        <label style="width: 100px;" class="layui-form-label">明星经理</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 160px;" name="starFm" required lay-verify="required" placeholder="请输入.." autocomplete="off" class="layui-input cwzl">
                        </div>
                    </div>
                </td>
                <td>
                    <button type="button" id="searchTable" class="layui-btn layui-btn-primary" style="margin:0 0 16px 19px;border-radius:7px;">
                        <i class="layui-icon">&#xe615;</i></button>
                </td>
            </tr>
        </table>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit" style="background:#BEBFAD"><i class="layui-icon">&#xe642;编辑</i></a>
    </script>

    <script>
        layui.use(['table','laydate','element'], function(){
            var table = layui.table;
            var element = layui.element;
            var laydate = layui.laydate;
            table.render({
                 elem: '#test'
                ,url:'./selectFundCompany'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }],
                limits: [3, 5, 10, 20],
                limit: 12,
                done:function () {
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#test1' //指定元素
                    });
                },
                method: "POST",
                id:'testReload',
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize'
                }
                ,title: '用户数据表'
                ,cols: [
                    [{
                        type: 'checkbox',
                        fixed: 'left'
                    },
                    {
                        field: 'fcId',
                        title: '基金公司编号',
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'fcName',
                        title: '基金公司名称',
                        align: 'center',
                        width: 200,
                    },
                    {
                        field: 'fcfCount',
                        title: '基金数量',
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'fcfmCount',
                        title: '基金经理数量',
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'aYearIncome',
                        title: '近一年收益',
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'fScale',
                        title: '基金规模',
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'fStartTime',
                        title: '基金成立时间',
                        templet : "<div>{{layui.util.toDateString(d.fStartTime, 'yyyy-MM-dd')}}</div>",
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'starFm',
                        title: '明星经理',
                        align: 'center',
                        width: 130,
                    },
                    {
                        field: 'starF',
                        title: '明星基金',
                        align: 'center',
                        width: 220,
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo',
                        width: 102,
                    },
                ]]
                ,page: true,
                parseData: function(res) { //res 即为原始返回的数据
                    console.log(res);
                    var current_pages;
                    //第一次显示的时候this.page=true，把这种情况单独列出
                    if (this.page === true) current_pages = 1;
                    else current_pages = this.page.curr;
                    //根据分页要求选出需要显示的数据
                    var data = res.data.slice(this.limit * (current_pages - 1), this.limit * current_pages);
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.length,
                        "data": data
                    }
                }
            });
            //监听行工具事件
            table.on('tool(test)', function(obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                var jsonData = JSON.stringify(data);
                if (layEvent === 'edit') {
                    layer.open({
                        title:"<div style='    width: 1000px;\n" +
                            "    background: #364150;\n" +
                            "    margin-left: -20px;\n" +
                            "    color: white;padding-left: 20px;'>基金公司信息修改</div>",
                        type: 1,
                        skin:"xgtc",
                        area: ['900px', '615px'],
                        offset:['10px','200px'],
                        content: $('#xgdiv'),
                        success: function(layero, index) {
                            $("#edit_fcId").val(data.fcId);
                            $("#edit_fcName").val(data.fcName);
                            $("#edit_fcfCount").val(data.fcfCount);
                            $("#edit_fcfmCount").val(data.fcfmCount);
                            $("#edit_aYearIncome").val(data.aYearIncome);
                            $("#edit_fScale").val(data.fScale);
                            $("#edit_fStartTime").val(data.fStartTime.split(" ")[0]);
                            $("#edit_starFm").val(data.starFm);
                            $("#edit_starF").val(data.starF);
                        },
                    });
                };
            });
            $('body').on('click', '#searchTable', function() {
                var input1 = $(".cwid").val();
                var input2 = $(".zrxm").val();
                var input3 = $(".cwzl").val();
                var input4 = $(".ylxm").val();
                table.reload('testReload', {
                    url: './conditionSelectCompany',
                    request: {
                        pageName: 'pageNum',
                        limitName: 'pageSize'
                    },
                    where: {
                        fcId: input1,
                        fcName: input2,
                        fStartTime: input3,
                        starFm: input4
                    },
                    page: {
                        curr: 1
                    }
                });
            });
        });
    </script>
    <script>
        layui.use(['laydate'], function(){
            var laydate = layui.laydate;

            laydate.render({
                elem: '#test1',
                trigger: 'click',
                isInitValue: false,
            });
        });
    </script>
</body>
</html>
